<template>
  <div>
    <!-- 搜索框  -->
    <div style="height: 25px;line-height: 50px;margin: 15px 0; display: flex;
            justify-content: center;
            align-items: center;">
      <el-input
        style="width: 200px;"
        clearable
        placeholder="请输入随工工单号"
        suffix-icon="el-icon-search"
        type="text"
        v-model="search">

      </el-input><el-button class="ml-5" type="primary" @click="load">搜索</el-button>
    </div>

    <!-- 随工信息表 aporder-->
    <el-table
      :data="aporder"
      :row-class-name="tableRowClassName"
      style="width: 100%"
      v-loading="loading">
      <el-table-column prop="aid" label="随工单号" width="110">
      </el-table-column>
      <el-table-column prop="apname" label="随工人员" width="80">
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" width="100px">
      </el-table-column>
     
      <el-table-column prop="status" label="随工状态" width="100px"
      :filters="[{ text: '随工中', value: '随工中' },
                       { text: '随工完成', value: '随工完成' }]"
                       :filter-method="filterButton"
                       filter-placement="bottom-end">
                       <template slot-scope="scope">
          <el-button style="margin: auto;" type="primary" round v-if="scope.row.status === '随工中'">随工中</el-button>
          <el-button style="margin: auto;" type="success" round v-else-if="scope.row.status === '随工完成'">随工完成</el-button>
        </template>
        
      </el-table-column>
      <el-table-column prop="oid" label="施工单号" width="140px">
      </el-table-column>
      <el-table-column
        prop="starttime"
        label="施工开始时间"
        width="140px"
        >
      </el-table-column>
      <el-table-column prop="endtime" label="施工结束时间" width="140px">
      </el-table-column>
      <el-table-column prop="location" label="施工位置">
      </el-table-column>
      <el-table-column prop="content" label="施工内容">
      </el-table-column>
      <el-table-column prop="fmsg" label="施工照片">
        <template #default="scope">
          <el-image 
            style="width: 100px; height: 100px"
            :src="scope.row.fmsg" 
            :preview-src-list="[scope.row.fmsg]"
            preview-teleported="true">
        </el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-popconfirm title="确定删除记录吗" @confirm="handleDelete(scope.row.aid)">
            <template #reference>
              <el-button type="danger" icon="el-icon-delete" circle />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
  <div style="padding: 10px 0;display: flex;
            justify-content: center;
            align-items: center;">
    <el-pagination
      style=" position: absolute;margin: auto"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :pager-count="7"
      :total="total">
    </el-pagination>
  </div>
  </div>
</template>

<script>
import request from "../../utils/request";

export default {
  name: 'ApWorkQuery',
  data(){
    return {
      search: '',
      currentPage: 1,
      pageSize: 5,
      total: 0,
      aporder: [],
      loading: false
    }
  },
  created() {
    this.load()
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
    // 加载时返回数据库中随工记录
    load(){
      this.loading = true
      request.get("/sys/aporder/selectAll",{
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log(res)
        this.aporder = res.data.records
        this.loading = false
        console.log(this.aporder)
        this.total = res.data.total

      })
    },
    // 删除记录
    handleDelete(aid){
        console.log(aid)
        request.delete("/sys/aporder/delete/"+aid).then(res=>{
          if (res.code === '1'){
            this.$message({
              type: "success",
              message: "删除成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load()  //删除后重新加载
        })
      },
      //状态筛选
    filterButton(value, row) {
      return row.status === value;
    },
    //改变当前每页显示个数触发
    handleSizeChange(pageSize) {  
      this.pageSize = pageSize;
      this.load()
    },
    //改变当前页码 触发
    handleCurrentChange(currentPage) {  
      this.currentPage = currentPage;
      this.load()
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
